
<template>
  <div class="online-service" :style="containerStyle">
    <div class="service-content" :style="contentStyle">
      <el-icon class="service-icon">
        <component :is="data.icon || defaultIcon" />
      </el-icon>

      <span class="service-text">{{ data.text || '在线客服' }}</span>

      <div v-if="data.showButton" class="service-button">
        <el-button
          :type="data.buttonType || 'primary'"
          :size="data.buttonSize || 'default'"
          @click="handleClick"
        >
          {{ data.buttonText || '立即咨询' }}
        </el-button>
      </div>
    </div>

    <!-- 删除组件 -->
    <slot name="deles" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Service } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['click'])

// 默认图标
const defaultIcon = computed(() => Service)

// 计算容器样式
const containerStyle = computed(() => {
  return {
    marginTop: `${props.styles.marginTop || 0}px`,
    marginBottom: `${props.styles.marginBottom || 0}px`,
    marginLeft: `${props.styles.marginLeft || 0}px`,
    marginRight: `${props.styles.marginRight || 0}px`,
    padding: `${props.data.padding || 10}px`,
    backgroundColor: props.data.backgroundColor || '#ffffff',
    borderRadius: `${props.data.borderRadius || 4}px`,
    border: props.data.showBorder ? `1px solid ${props.data.borderColor || '#e4e7ed'}` : 'none'
  }
})

// 计算内容样式
const contentStyle = computed(() => {
  return {
    display: 'flex',
    flexDirection: props.data.layout === 'vertical' ? 'column' : 'row',
    alignItems: 'center',
    justifyContent: props.data.align === 'center' ? 'center' : 'flex-start'
  }
})

// 事件处理
function handleClick() {
  emit('click', props.data)
}
</script>

<style lang="scss" scoped>
.online-service {
  width: 100%;
  box-sizing: border-box;

  .service-content {
    .service-icon {
      margin-right: 10px;
      font-size: 24px;
      color: #409eff;
    }

    .service-text {
      font-size: 16px;
      color: #333;
      margin-right: 15px;
    }

    .service-button {
      margin-left: auto;
    }
  }
}
</style>
